import { CommonForm } from "@/pages/OrderModule/common/components/CommonForm";
import { CommonModal, useModal } from "@/views/components/CommonModal";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import Typography from "@/pages/OrderModule/common/components/Typography";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { Alert, Button, Col, Form, InputNumber, Modal, Radio, Row, Space, Progress, message } from "antd";
import CommonInputNumber from "@/pages/OrderModule/common/components/CommonInputNumber";
import { useCallback, useEffect, useMemo, useState } from "react";

import { usePolling } from "@/views/hooks/usePolling";

import ProgressModal from "@/views/components/UIModal/ProgressModal";
import ResultModal from "@/views/components/UIModal/ResultModal";

import { getInventorySyncGetSchedule } from "../../../service";

/**
 * 编辑库存（
 *
 * 是否确定修改库存?确定后将直接修改线上库存
 *
 *  */
function ActionModal(props) {
	// console.log("ActionModal(props)", props);
	const { isSkuType } = props;
	const [visible, setVisible] = useState("EditModal");

	const [percent, setPercent] = useState(0);

	const [result, setResult] = useState({ total: "--", success: "--", failed: "--" });

	const { setTimer, clearTimer } = usePolling();

	const onCancel = () => {
		props.onCancel();
		clearTimer();
	};
	const [form] = Form.useForm();

	const editModal = useCallback(() => {

		if (visible !== "EditModal") return <></>;

		function handleOk() {
			form.submit();
		}
		function onFinish() {
			const msg = form.getFieldValue("msg");
			// console.log(props, "propssssssssssssssss");
			const records = props.commandText == "批量修改库存确定后" ? props.selectedRows : [props.selectedRow];
			Modal.confirm({
				centered: true,
				width: "333px",
				title: "是否确定修改库存?确定后将直接修改线上库存！",
				okText: "确定",
				cancelText: "取消",
				onOk() {
					props.handleCommand(props.commandText, { ids: records.map(e => e.id), stockNum: msg }, ({ success, data }) => {
						if (success) {
							setVisible("ProgressModal");
							setTimer(
								getInventorySyncGetSchedule,
								{ batchId: data },
								({ success, completedNum, isCompleted, totalNum }) => {
									if (isCompleted) {
										console.log("isCompleted");
										setVisible("ResultModal");
										setResult({ total: totalNum, success: completedNum, failed: totalNum - completedNum });
										return true;
									} else {
										console.log("setPercent");
										setPercent(((completedNum / totalNum) * 100).toFixed());
										return false;
									}
								},
								() => {
									onCancel();
								}
							);
						} else {
							onCancel();
						}
					});
				}
			});
		}

		return (
			<CommonModal title={{ title: "编辑库存" }} open={true} width="449px" onCancel={onCancel} onOk={handleOk}>
				<Alert
					showIcon
					message={
						<Typography as="s1">
							SKU库存最小为0，最大为999999，库存为0将导致商品下架。若修改后库存大于最大值。则取原库存。
						</Typography>
					}
				/>
				<SubTitle symbol title="编辑SKU库存" as="s2" wrapStyle={{ marginTop: 16 }} />
				<br />
				<CommonForm
					formProps={{
						form,
						onFinish
					}}
					columns={[
						{
							Component: CommonInputNumber,
							name: "msg",

							rules: [{ required: true, message: "请输入" }],
							props: {
								placeholder: "请输入SKU库存",
								max: 999999,
								min: 0,
								precision: 0,
								controls: false
							}
						}
					]}
				></CommonForm>
			</CommonModal>
		);
	}, [isSkuType]);

	return (
		<>
			{editModal()}
			<ProgressModal
				visible={visible === "ProgressModal"}
				type="progress"
				percent={percent}
				msg="批量更新中..."
				onCancel={() => {
					{
						onCancel();
					}
				}}
			/>

			<ResultModal
				visible={visible === "ResultModal"}
				onCancel={onCancel}
				onOk={() => setVisible("----")}
				result={result}
				isSkuType={isSkuType}
				selectedRows={props.selectedRows}
				actionType={"update-stock"}
			/>
		</>
	);
}

export default ActionModal;
